<template>
  <div class="container">
    <div class="app-box">
      <div class="title-text">商户信息</div>
          <el-form ref="form" :model="form" :rules="rules" label-width="130px" label-position="left">
            <el-form-item label="商户名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入商户名称" />
            </el-form-item>
            <el-form-item label="商户标识" prop="mark">
              <el-input v-model="form.mark" placeholder="请输入商户标识,支持大小写字母和数字" />
            </el-form-item>
      <!--        <el-form-item label="所属代理商id" prop="agentId">-->
      <!--          <el-input v-model="form.agentId" placeholder="请输入所属代理商id" />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="所属代理商名称" prop="agentName">-->
      <!--          <el-input v-model="form.agentName" placeholder="请输入所属代理商名称" />-->
      <!--        </el-form-item>-->

            <el-form-item label="姓名" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" />
          </el-form-item>
            <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" />
          </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>

            <el-form-item label="商户所在城市" prop="city">
              <el-input v-model="form.city" placeholder="请输入商户所在城市" />
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入详细地址" />
            </el-form-item>
      <!--        <el-form-item label="余额" prop="balance">-->
      <!--          <el-input v-model="form.balance" placeholder="请输入余额" />-->
      <!--        </el-form-item>-->


      <!--      <el-form-item label="0线下 1 短信/邮件授权" prop="authMethod">
              <el-select v-model="form.authMethod" placeholder="请选择0线下 1 短信/邮件授权">
                <el-option
                  v-for="dict in dict.type.sys_store_authomethod"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item> -->
      <!--      <el-form-item label="认证权限 0允许  1不允许" prop="authStatus">
              <el-select v-model="form.authStatus" placeholder="请选择认证权限 0允许  1不允许">
                <el-option
                  v-for="dict in dict.type.sys_store_autostatus"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item> -->
      <!--        <el-form-item label="帐号状态" prop="status">-->
      <!--          <el-select v-model="form.status" placeholder="请选择帐号状态">-->
      <!--            <el-option-->
      <!--              v-for="dict in dict.type.sys_agent"-->
      <!--              :key="dict.value"-->
      <!--              :label="dict.label"-->
      <!--              :value="dict.value"-->
      <!--            ></el-option>-->
      <!--          </el-select>-->
      <!--        </el-form-item>-->
            <!-- <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item> -->
      <!--        <el-form-item label="操作人id" prop="userId">-->
      <!--          <el-input v-model="form.userId" placeholder="请输入操作人id" />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="部门id" prop="deptId">-->
      <!--          <el-input v-model="form.deptId" placeholder="请输入部门id" />-->
      <!--        </el-form-item>-->
          </el-form>
    </div>
    <div class="app-box">
      <div class="setting-box">
        <p class="title-text">权限配置</p>
        <el-form ref="form2" :model="form2" :rules="rules2">
          <el-form-item label="查询认证权限" prop="searchOpen">
            <!-- <span class="text">查询认证权限</span> -->
            <el-switch
              v-model="form2.searchOpen"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
            <p class="text-tip">给候选人发送短信和邮件进行认证</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="app-box">
      <div class="package-box">
        <p class="title-text">配置背调套餐</p>
        <div class="content">
          <p class="type">线上套餐</p>
          <div class="box-group">
            <div class="box-card" v-for="i in cardList" :key="i.id" @click="selectClick(i.id)" :style="{ border: i.checked ? '1px solid #767688' : '', }">
               <!-- :class="{ active:selectIndex === i.id }" -->
              <img v-if="i.checked" style="float: right;" src="@/assets/bt_img/checked.png" />
              <div class="box">
                <div style="display: flex; flex-direction: row;">
                  <img src="@/assets/bt_img/校招.png" style="width: 25px; height: 25px;" />
                  <span class="package-name">{{ i.name }}</span>
                </div>
                <div class="list">
                  <div v-for="(o, index) in i.sysSurveyVOS" :key="index" class="box-content">
                    <p class="item-name">{{ o.name }}</p>
                    <p class="item-name amount">x {{ o.num }}</p>
                  </div>
                </div>
                <div class="box-footer" :class="{ red: i.checked }">￥{{ i.price }}</div>
              </div>
            </div>
          </div>
          <p class="type">线下套餐</p>
          <div class="box-group">
            <div class="box-card" v-for="(i, index) in cardList2" :key="i.id" @click="selectClick2(i.id)" :class="{ active: i.checked }" :style="{
            border: i.checked ? '1px solid #767688' : '',
          }">
              <img v-if="i.checked" style="float: right;" src="@/assets/bt_img/checked.png" />
              <div class="box">
                <div style="display: flex; flex-direction: row;">
                  <img src="@/assets/bt_img/校招.png" style="width: 25px; height: 25px;" />
                  <span class="package-name">{{ i.name }}</span>
                </div>
                <div class="list">
                  <div v-for="(o, index) in i.sysSurveyVOS" :key="index" class="box-content">
                    <p class="item-name">{{ o.name }}</p>
                    <p class="item-name amount">x {{ o.num }}</p>
                  </div>
                </div>
                <div class="box-footer" :class="{ red: i.checked }">￥{{ i.price }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="app-box">
      <AddFooter @submitForm="submitForm"></AddFooter>
    </div>
<!--    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="back">取 消</el-button>
    </div> -->
  </div>
</template>

<script>
  import { listStoreManage, getStoreManage, delStoreManage, addStoreManage, updateStoreManage } from "@/api/store/storeManage";
  import { getListMore } from "@/api/packages/packageManage";
  import AddFooter from "@/components/AddFooter/index";
  export default {
    name: "addStore",
    components: {
      AddFooter
    },
    data() {
      return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "商家名称不能为空", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "联系人名称不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "联系人邮箱不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" }
        ],
        city: [
          { required: true, message: "所在城市不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "详细地址不能为空", trigger: "blur" }
        ],
        mark: [
          { required: true, message: "标识不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        authMethod: [
          { required: true, message: "0线下 1 短信/邮件授权不能为空", trigger: "change" }
        ],
        authStatus: [
          { required: true, message: "认证权限 0允许  1不允许不能为空", trigger: "change" }
        ],
        userId: [
          { required: true, message: "操作人id不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "部门id不能为空", trigger: "blur" }
        ]
      },
      form2: {
        searchOpen: true,
      },
      rules2: {
        searchOpen: [
          { required: true, message: "必须选择", trigger: "change" }
        ],
      },
      cardList: [],
      cardList2: [],
      packageIds: [],
      }
    },
    watch: {
      '$route.query.type': function(newVal, oldVal) {
        if (newVal === 'edit') {
          this.getInfo();
        }
      }
    },
    created() {
      if (this.$route.query.id) {
        this.getInfo();
      } else {
        this.getCardlist();
      }
    },
    methods: {
      // 新增时获取套餐列表
      async getCardlist() {
        const res1 = await getListMore('1');
        this.cardList2 = res1.data;
        const res2 = await getListMore('0');
        this.cardList = res2.data;
      },
      // 获取套餐列表
      async getPackageList(info) {
        const res1 = await getListMore('1');
        this.cardList2 = res1.data;
        const res2 = await getListMore('0');
        this.cardList = res2.data;
        const packageIdsSet = new Set(info.packageIds);
        [this.cardList, this.cardList2].forEach(list => {
          list.forEach(t => {
            t.checked = packageIdsSet.has(t.id);
          });
        });
      },

      // 获取用户信息
      async getInfo() {
        const response = await getStoreManage(this.$route.query.id);
        this.form = response.data;
        this.getPackageList(response.data);
        // console.log('改之前this.form.packageIds', this.form.packageIds);
        this.form2.searchOpen = this.form.authStatus === 0;
      },

      /** 提交按钮 */
      submitForm() {
        // 创建一个 Set 以快速查找 this.packageIds 中的元素
        const packageIdsSet = new Set(this.packageIds);
        [this.cardList, this.cardList2].forEach(list => {
          list.forEach(c => {
            if (c.checked === true) {
              packageIdsSet.add(c.id);
            } else {
              packageIdsSet.delete(c.id);
            }
          })
        });
        this.form.packageIds = Array.from(packageIdsSet);

        if (this.form2.searchOpen === true) {
          this.form.authStatus = 0;
        } else {
          this.form.authStatus = 1;
        };
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateStoreManage(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.$router.push({ path: '/storeManage/index' });
              });
            } else {
              addStoreManage(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.$router.push({ path: '/storeManage/index' });
              });
            }
          }
        });
      },
      // 取消
      back() {
        this.$router.back();
      },
      // 点击卡片
      selectClick(id) {
        this.cardList.forEach((card, index) => {
          if(card.id === id) {
            card.checked = !card.checked;
            this.$forceUpdate();
          }
        });
      },
      // 点击卡片
      selectClick2(id) {
        this.cardList2.forEach((card, index) => {
          if(card.id === id) {
            card.checked = !card.checked;
            this.$forceUpdate();
          }
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    margin: 20px;
    background-color: #F5F5F6;
    .el-form {
      width: 400px;
      margin: auto;
      .el-input {
        width: 292px;
        height: 36px;
        background: #F5F5F6;
        border-radius: 5px;
      }
    }
    .setting-box {

      // height: 120px;
      .el-form {
        margin: 0 auto;
        .text-tip {
          margin: 0 5px;
          width: 211px;
          height: 15px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
        }
      }

    }
    .package-box {
      .content {
        .type {
          margin-left: 95px;
          margin-top: 20px;
          width: 57px;
          height: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
        }
        .title {
          color: gray;
        }
        .box-group {
          margin-left: 75px;
          display: flex;
          flex-wrap: wrap;
          .box {
            width: 250px;
            min-height: 200px;
            margin: 20px;
            .package-name {
              width: 295px;
              height: 17px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 16px;
              color: #1F232B;
              margin-left: 5px;
            }
            .list {
              margin-top: 20px;
              overflow-y: auto;
              .box-content {
                display: flex;
                position: relative;
                .item-name {
                  width: 245px;
                  height: 12px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 14px;
                  color: #666666;
                }
                .amount {
                  margin-left: auto; /* 这将使.amount靠右 */
                  text-align: right; /* 确保文本也靠右对齐 */
                }
              }
            }
            .box-footer {
              position: absolute;
              bottom: 20px;
              width: 90px;
              height: 20px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 18px;
              color: #666666;
              margin-top: 15px;
            }
            .red {
              color: #B41919;
            }
          }
          .box-card {
            width: 295px;
            height: 283px;
            border-radius: 5px;
            border: 1px solid #DCDCDC;
            margin: 20px;
            position: relative;
            cursor: pointer;
            .img {
              position: absolute;
              transform: translateY(15px);
            }
            .text {
              font-size: 14px;
            }

            .item {
              margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
              display: table;
              content: "";
            }
            .clearfix:after {
              clear: both
            }
          }
        }
        .active {
          border: 1px solid #535E83;
        }
      }
    }
    .title {
      margin: 20px;
    }

    .footer {
      display: flex;
      align-items: center;
      .text-wrapper_18 {
        width: 120px;
        height: 15px;
        display: flex;
        align-items: center;
        overflow-wrap: break-word;
        font-size: 0;
        font-family: MicrosoftYaHei;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 14px;
        margin: 46px 0 0 67px;
        .el-button {
          margin: 0 20px;
          text-align: right;
          background-color: rgba(83, 94, 131, 1);
          border-radius: 4px;
          height: 36px;
          width: 78px;
        }
      }

      .text_95 {
        width: 120px;
        height: 15px;
        overflow-wrap: break-word;
        color: rgba(31, 35, 43, 1);
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 14px;
      }

      .text_96 {
        width: 120px;
        height: 15px;
        overflow-wrap: break-word;
        color: rgba(214, 75, 36, 1);
        font-size: 18px;
        font-family: MicrosoftYaHei;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 18px;
      }

    }
  }
</style>
